<template>
  <div class="back" style="height:720px;width:100%;background-color:#FFF;margin-top:25px;padding:10px;padding-right:0px;">
    <div class="page" style="padding-left:30px;height:100%;display:flex;">
      <div class="basicInfo">
        <!-- 头像 -->
        <el-col :span="12">
          <div class="demo-basic--circle" style="width:160px;height:160px;padding-left:30px;">
            <div class="block"><el-avatar id="avatar-container" :size="160" :src="image"></el-avatar></div>
          </div>
        </el-col>
        <!-- 姓名 -->
        <div class="user-info">
          <label class="name_label">{{name}}</label>
          <label class="id_label">{{number}}</label>
        </div>
        <div class="group" style="display:flex;flex-direction:column;margin-top;5px;">
          <el-button type="primary" plain @click="toChange" class="button">
            <i class="el-icon-edit"></i>
            修改密码
          </el-button>
          <el-button type="primary" plain class="button" @click="handleEdit">
            <i class="el-icon-lx-edit"></i>
            修改信息
          </el-button>
          <!-- 学生操作 -->
          <el-button type="primary" plain @click="toStudentCourse" v-show="student" class="button">
            <i class="el-icon-s-grid"></i>
            查看课程
          </el-button>
          <!-- 教师操作 -->
          <el-button type="primary" plain @click="toGrade" v-show="teacher" class="button">
            <i class="el-icon-circle-plus-outline"></i>
            成绩录入
          </el-button>
          <!-- 管理员 -->
          <el-button type="primary" plain @click="toManageTeacher" v-show="admin" class="button">
            <i class="el-icon-lx-profile"></i>
            教师信息管理
          </el-button>
          <el-button type="primary" plain @click="toManageStudent" v-show="admin" class="button">
            <i class="el-icon-lx-group"></i>
            学生信息管理
          </el-button>
          <el-button type="primary" plain @click="toManageCourse" v-show="admin" class="button">
            <i class="el-icon-setting"></i>
            课程管理
          </el-button>
        </div>
      </div>
      <el-divider direction="vertical" style="height:100%;"></el-divider>
      <div style="display:flex;flex-direction:column;width:100%">
        <span>基本信息</span>
        <el-divider></el-divider>
      <!-- 学生信息 -->
        <div class="total" style="display:flex;" v-show="student">
          <!-- 左边信息 -->
          <div class="left" style="margin-right:50px;">
            <!-- 手机号码 -->
            <div class="profile-update-phone">
              <div class="field">
                <label for="phone">手机号码</label>
                <div style="display:flex;">
                  <el-col :span="8" style="font-size:18px;width:100%;">
                    <el-card shadow="hover">
                      <i class="el-icon-phone"></i>
                      {{phone}}
                    </el-card>
                  </el-col>
                </div>        
              </div>
            </div>
            <!-- 出生日期 -->
            <div class="field">
              <label for="birth" class="birth">出生日期</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-date"></i>
                  {{birth}}
                </el-card>
              </el-col>
            </div>
            <!-- 性别 -->
            <div class="field" style="height:90px;">
              <label>性 别</label>
              <div style="display:flex;">
                <el-radio-group v-model="gender_id" size="large" style="display:flex;margin-top:5px;width:200px;">
                  <el-radio label="男" border :disabled="!gender" style="width:100px;">男<i class="el-icon-lx-male"></i></el-radio>
                  <el-radio label="女" border :disabled="gender" style="width:100px;">女<i class="el-icon-lx-female"></i></el-radio>
                </el-radio-group>
              </div>
            </div>
            <!-- 籍贯 -->
            <div class="field">
              <label>籍 贯</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-location-information"></i>
                  {{stu_native}}
                </el-card>
              </el-col>
            </div>
            <!-- 家庭住址 -->
            <div class="field">
              <label>家庭住址</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-lx-home"></i>
                  {{family_address}}
                </el-card>
              </el-col>
            </div>
          </div>
          <!-- 右边信息 -->
          <div class="right">
            <!-- 入学年份 -->
            <div class="field">
              <label for="year" class="year">入学年份</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-date"></i>
                  {{year}}
                </el-card>
              </el-col>
            </div>
            <!-- 学号/工号 -->
            <div class="field">
              <label for="number" class="year">学 号</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-lx-news"></i>
                  {{number}}
                </el-card>
              </el-col>
            </div>
            <!-- 专业 -->
            <div class="field">
              <label>专 业</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-place"></i>
                  {{major_name}}
                </el-card>
              </el-col>
            </div>
          </div>
        </div>
      <!-- 教师信息 -->
        <div class="total" style="display:flex;" v-show="teacher">
          <!-- 左边信息 -->
          <div class="left" style="margin-right:50px;">
            <!-- 手机号码 -->
            <div class="profile-update-phone">
              <div class="field">
                <label for="phone">手机号码</label>
                <div style="display:flex;">
                  <el-col :span="8" style="font-size:18px;width:100%;">
                    <el-card shadow="hover">
                      <i class="el-icon-phone"></i>
                      {{phone}}
                    </el-card>
                  </el-col>
                </div>        
              </div>
            </div>
            <!-- 出生日期 -->
            <div class="field">
              <label for="birth" class="birth">出生日期</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-date"></i>
                  {{birth}}
                </el-card>
              </el-col>
            </div>
            <!-- 性别 -->
            <div class="field" style="height:90px;">
              <label>
                性 别
              </label>
              <div style="display:flex;">
                <el-radio-group v-model="gender_id" size="large" style="display:flex;margin-top:5px;width:200px;">
                  <el-radio label="男" border :disabled="!gender" style="width:100px;">男<i class="el-icon-lx-male"></i></el-radio>
                  <el-radio label="女" border :disabled="gender" style="width:100px;">女<i class="el-icon-lx-female"></i></el-radio>
                </el-radio-group>
              </div>
            </div>
            <!-- 毕业院校 -->
            <div class="field">
              <label>毕业院校</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-location-information"></i>
                  {{graduate_schoole}}
                </el-card>
              </el-col>
            </div>
            <!-- 家庭住址 -->
            <div class="field">
              <label>家庭住址</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-lx-home"></i>
                  {{family_address}}
                </el-card>
              </el-col>
            </div>
          </div>
          <!-- 右边信息 -->
          <div class="right">
            <!-- 入职年份 -->
            <div class="field">
              <label for="year" class="year">入职年份</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-date"></i>
                  {{year}}
                </el-card>
              </el-col>
            </div>
            <!-- 职称 -->
            <div class="field">
              <label for="year" class="year">职 称</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-lx-profile"></i>
                  {{title_name}}
                </el-card>
              </el-col>
            </div>
            <!-- 学号/工号 -->
            <div class="field">
              <label for="number" class="year">工 号</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-lx-news"></i>
                {{number}}
                </el-card>
              </el-col>
            </div>
            <!-- 学院 -->
            <div class="field">
              <label>学 院</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-place"></i>
                  {{major_name}}
                </el-card>
              </el-col>
            </div>
          </div>
        </div>
      <!-- 管理员信息 -->
        <div class="total" style="display:flex;" v-show="admin">
          <!-- 左边信息 -->
          <div class="left" style="margin-right:50px;">
            <!-- 姓名 -->
            <div class="profile-update-phone">
              <div class="field">
                <label for="phone">姓 名</label>
                <div style="display:flex;">
                  <el-col :span="8" style="font-size:18px;width:100%;">
                    <el-card shadow="hover">
                      <i class="el-icon-lx-people"></i>
                      {{name}}
                    </el-card>
                  </el-col>
                </div>        
              </div>
            </div>
            <!-- 账号 -->
            <div class="field">
              <label>账号</label>
              <el-col :span="8" style="font-size:18px;width:100%;">
                <el-card shadow="hover">
                  <i class="el-icon-lx-addressbook"></i>
                  {{number}}
                </el-card>
              </el-col>
            </div>
          </div>
        </div>
      <!-- 修改教师信息dialog -->
      <el-dialog title="修改信息" :visible.sync="editVisible_teacher" width="34%" :close-on-click-modal="false">
        <el-form :model="editForm.teacherInfo" label-width="70px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="editForm.teacherInfo.name" placeholder="姓名" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone_number">
            <el-input v-model="editForm.teacherInfo.phone_number" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="editForm.teacherInfo.gender" placeholder="性别" disabled>
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属学院" prop="college.college_id">
            <el-select v-model.number="editForm.teacherInfo.college.college_id" placeholder="所属学院">
              <el-option v-for="college in colleges" :key="college.college_id" :label="college.college_name" :value="college.college_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="家庭住址" prop="family_address">
            <el-input v-model="editForm.teacherInfo.family_address" placeholder="家庭住址"></el-input>
          </el-form-item>
          <el-form-item label="毕业院校" prop="graduate_schoole">
            <el-input v-model="editForm.teacherInfo.graduate_schoole" placeholder="毕业院校" disabled></el-input>
          </el-form-item>
          <el-form-item label="入职年份" prop="entry_time">
            <el-date-picker
              disabled
              format="yyyy"
              v-model="editForm.teacherInfo.entry_time"
              type="month"
              placeholder="入职时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="职称" prop="title.id">
            <el-select v-model="editForm.teacherInfo.title.id" placeholder="职称">
              <el-option v-for="title in titles" :key="title.id" :label="title.title" :value="title.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="照片" prop="image">
            <el-upload
              action=""
              list-type="picture-card"
              :class="{ hide: !uploadVisible }"
              :limit="1"
              :file-list="fileList"
              :on-remove="handleRemoveImg"
              :http-request="handleUpload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelEdit">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改学生信息dialog -->
      <el-dialog title="修改信息" :visible.sync="editVisible_student" width="34%" :close-on-click-modal="false">
        <el-form :model="editForm.studentInfo" label-width="70px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="editForm.studentInfo.name" placeholder="姓名" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone_number">
            <el-input v-model="editForm.studentInfo.phone_number" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="editForm.studentInfo.gender" placeholder="性别" disabled>
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学院" prop="college_id">
            <el-select @change="getMajorData" v-model.number="college_id" placeholder="学院">
              <el-option v-for="college in colleges" :key="college.college_id" :label="college.college_name" :value="college.college_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业" prop="major_name">
            <el-select v-model.number="editForm.studentInfo.major.major_id" placeholder="专业">
              <el-option v-for="major in majors" :key="major.major_id" :label="major.major_name" :value="major.major_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="家庭住址" prop="family_address">
            <el-input v-model="editForm.studentInfo.family_address" placeholder="家庭住址"></el-input>
          </el-form-item>
          <el-form-item label="籍贯" prop="stu_native">
            <el-input v-model="editForm.studentInfo.stu_native" placeholder="籍贯" disabled></el-input>
          </el-form-item>
          <el-form-item label="入学年份" prop="entry_time">
            <el-date-picker
              disabled
              format="yyyy"
              v-model="editForm.studentInfo.entry_time"
              type="year"
              placeholder="入学时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              disabled
              v-model="editForm.studentInfo.birthday"
              type="date"
              placeholder="生日">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="照片" prop="image">
            <el-upload
              action=""
              list-type="picture-card"
              :class="{ hide: !uploadVisible }"
              :limit="1"
              :file-list="fileList"
              :on-remove="handleRemoveImg"
              :http-request="handleUpload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelEdit">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改管理员信息dialog -->
      <el-dialog title="修改信息" :visible.sync="editVisible_admin" width="34%" :close-on-click-modal="false">
        <el-form :model="editForm.adminInfo" label-width="70px">
          <el-form-item label="ID" prop="id">
            <el-input v-model="editForm.adminInfo.id" placeholder="ID" disabled></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="editForm.adminInfo.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="account">
            <el-input v-model="editForm.adminInfo.account" placeholder="账号" disabled></el-input>
          </el-form-item>
          <el-form-item label="照片" prop="image">
            <el-upload
              action=""
              list-type="picture-card"
              :class="{ hide: !uploadVisible }"
              :limit="1"
              :file-list="fileList"
              :on-remove="handleRemoveImg"
              :http-request="handleUpload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelEdit">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </div>
      </el-dialog>
      </div>
    </div>
  </div>
    
</template>

<script>
import { getRequest } from '@/api/index';
import { postRequest } from '@/api/index';
import { handleUploadImg } from '@/utils/upload';
export default {
    name: 'Personal',
    components: {},
    data() {
        return {
            addVisible: false,
            editVisible_teacher: false,
            editVisible_student: false,
            editVisible_admin: false,
            uploadVisible: true,
            dialogImgUrl: '',
            fileList: [],
            tableData: [],
            colleges: [],
            majors: [],
            titles: [],
            // circleUrl: '',
            id: '',
            name: '',
            phone: '',
            birth: '',
            year: '',
            number: '',
            gender_id: '男',
            gender: true,
            stu_native: '',
            family_address: '',
            major_name: '',
            college_id: '',
            graduate_schoole: '',
            title_name: '',
            student: true,
            teacher: false,
            admin: false,
            change_phone: true,
            image: '',
            title: {},
            major: {},
            editForm: {
              adminInfo:{},
              studentInfo:{
                major: {}
              },
              teacherInfo:{
                id:'',
                college: {},
                title: {}
              }
            },
            rules: {}
        };
    },
    created() {
        this.getData();
        this.getCollegeData();
        this.getTitleData();
    },
    methods: {
        getData() {
            // TODO 接口请求
            getRequest('/login/public/user/get_user_info').then(res => {
              console.log(res)
                this.tableData = res.data;
                if (this.$store.state.status == 1) {
                    this.student = true;
                    this.teacher = false;
                    this.admin = false;
                    this.name = res.data.studentInfo.name;
                    this.phone = res.data.studentInfo.phone_number;
                    this.birth = res.data.studentInfo.birthday;
                    this.stu_native = res.data.studentInfo.stu_native;
                    this.family_address = res.data.studentInfo.family_address;
                    this.year = res.data.studentInfo.entry_time;
                    this.image = res.data.studentInfo.image;
                    this.number = res.data.studentInfo.id;
                    this.major_name = res.data.studentInfo.major.major_name;
                    this.gender_id = res.data.studentInfo.sex;
                    if (res.data.studentInfo.sex == 0) {
                        this.gender_id = '男';
                        this.gender = true;
                    } else {
                        this.gender_id = '女';
                        this.gender = false;
                    }
                }
                if (this.$store.state.status == 2) {
                    this.teacher = true;
                    this.student = false;
                    this.name = res.data.teacherInfo.name;
                    this.phone = res.data.teacherInfo.phone_number;
                    this.birth = res.data.teacherInfo.birthday;
                    this.graduate_schoole = res.data.teacherInfo.graduate_schoole;
                    this.title_name = res.data.teacherInfo.title.title;
                    this.family_address = res.data.teacherInfo.family_address;
                    this.year = res.data.teacherInfo.entry_time;
                    this.image = res.data.teacherInfo.image;
                    this.number = res.data.teacherInfo.id;
                    this.major_name = res.data.teacherInfo.college.college_name;
                    this.gender_id = res.data.teacherInfo.sex;
                    if (res.data.teacherInfo.sex == 0) {
                        this.gender_id = '男';
                        this.gender = true;
                    } else {
                        this.gender_id = '女';
                        this.gender = false;
                    }
                }
                if (this.$store.state.status == 3) {
                    this.admin = true;
                    this.student = false;
                    this.teacher = false;
                    this.image = res.data.adminInfo.image;
                    this.name = res.data.adminInfo.name;
                    this.number = res.data.adminInfo.account;
                }
            });
        },
        // 获取所有学院信息
        getCollegeData() {
            let that = this;
            getRequest('/public/baseinfo/college/getall').then(res => {
                that.colleges = res.data;
                this.getMajorData(res.data[0].college_id)
                this.college_id = res.data[0].college_id;
            });
        },
        // 获取所有职称信息
        getTitleData() {
            let that = this;
            getRequest('/public/baseinfo/title/getall').then(res => {
              that.titles = res.data;
            });
        },
        // 获取专业信息
        getMajorData(college_id) {
          let that = this;
          getRequest('/public/baseinfo/major/getall', {college_id: college_id}).then(res => {
            this.majors = res.data;
          });
        },
        // 修改信息
        handleEdit() {
            console.log('修改信息');
            // 重置
            this.fileList = [];
            if (this.$store.state.status == 1) {
              // 隐藏 + 号
              if (this.image) {
                this.uploadVisible = false;
                this.fileList.push({ name: 'image', url: this.tableData.studentInfo.image });
              } else {
                this.uploadVisible = true;
              }
            }
            if (this.$store.state.status == 2) {
              // 隐藏 + 号
              if (this.image) {
                this.uploadVisible = false;
                this.fileList.push({ name: 'image', url: this.tableData.teacherInfo.image });
              } else {
                this.uploadVisible = true;
              }
            }
            if (this.$store.state.status == 3) {
              // 隐藏 + 号
              if (this.image) {
                this.uploadVisible = false;
                this.fileList.push({ name: 'image', url: this.tableData.adminInfo.image });
              } else {
                this.uploadVisible = true;
              }
            }            
            if (!this.editForm.teacherInfo.title) {
              this.editForm.teacherInfo.title = {};
            }
            // 学生修改信息
            if (this.$store.state.status == 1) {
                this.editVisible_student = true;
                let temp = JSON.parse(JSON.stringify(this.tableData.studentInfo))
                this.editForm.studentInfo = temp;
                if(this.tableData.studentInfo.gender=='男'){
                  this.editForm.studentInfo.gender='0'
                }
                else if(this.tableData.studentInfo.gender=='女'){
                  this.editForm.studentInfo.gender='1'
                }
            }
            // 教师修改信息
            if (this.$store.state.status == 2) {
                this.editVisible_teacher = true;
                let temp = JSON.parse(JSON.stringify(this.tableData.teacherInfo))
                this.editForm.teacherInfo = temp;
                if(this.tableData.teacherInfo.gender=='男'){
                  this.editForm.teacherInfo.gender='0'
                }
                else if(this.tableData.teacherInfo.gender=='女'){
                  this.editForm.teacherInfo.gender='1'
                }
            }
            // 管理员修改信息
            if (this.$store.state.status == 3) {
                this.editVisible_admin = true;
                let temp = JSON.parse(JSON.stringify(this.tableData.adminInfo))
                this.editForm.adminInfo = temp
            }
        },
        // 更新信息
        saveEdit() {
          if(this.image==null){
            if(this.$store.state.status == 1){
              this.editForm.studentInfo.image=null
            }
            if(this.$store.state.status == 2){
              this.editForm.teacherInfo.image=null
            }
            if(this.$store.state.status == 3){
              this.editForm.adminInfo.image=null
            }
          }
          postRequest('/login/public/user/updateuserinfo', this.editForm).then(
            res => {
              if (res.code == 200) {
                this.$message.success('修改信息成功!');
                this.editVisible_teacher = false;
                this.editVisible_student = false;
                this.editVisible_admin = false;                
                this.getData()
              } else {
                this.$message.error('修改信息失败!');
              }
            },
            err => {}
          );
        },
        // 取消编辑
        cancelEdit(){
          this.editVisible_teacher=false;
          this.editVisible_student=false;
          this.editVisible_admin=false;
          this.getData()
        },
        // 上传图片
        handleUpload(item) {
          handleUploadImg(item).then(res => {
            if (res.code == 200) {
              this.$message.success('图片上传成功！');
              this.dialogImgUrl = res.data.url;
              this.image = res.data.url;
              if (this.$store.state.status == 1) {
                this.editForm.studentInfo.image=this.image
              }
              if (this.$store.state.status == 2) {
                this.editForm.teacherInfo.image=res.data.url
              }
              if (this.$store.state.status == 3) {
                this.editForm.adminInfo.image=res.data.url
              }
              // 上传后隐藏
              this.uploadVisible = false;
            } else {
              this.$message.error('上传超出大小限制！');
            }
          });
        },
        handleRemoveImg() {
            this.uploadVisible = true;
            this.image=null
        },
        handleAdd() {
            this.addVisible = true;
            this.fileList = [];
            this.uploadVisible = true;
        },
        // 跳转详情页方法
        // 修改密码
        toChange() {
            this.$router.push('/personal/password');
        },
        // 学生查看课程
        toStudentCourse() {
            this.$router.push('/student/studentCourse');
        },
        // 教师录入成绩
        toGrade() {
            this.$router.push('/grade/input');
        },
        // 管理学生信息
        toManageStudent() {
            console.log('管理学生信息');
            this.$router.push('/manage/student');
        },
        // 管理教师信息
        toManageTeacher() {
            console.log('管理教师信息');
            this.$router.push('/manage/teacher');
        },
        // 管理课程信息
        toManageCourse() {
            console.log('管理课程信息');
            this.$router.push('/manage/course');
        }
    }
};
</script>

<style scoped>
.basicInfo {
    width: auto;
    display: flex;
    flex-direction: column;
    margin-right: 40px;
    margin-top: 10px;
    align-content: center;
}
.user-info {
    display: flex;
    flex-direction: column;
    margin: 1em 0em 1em 0em;
    color: rgba(0, 0, 0, 0.8);
    font-size: 1.5em;
    font-weight: bold;
    text-transform: none;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}
.el-divider--vertical {
    display: inline-block;
    width: 1px;
    height: 100%;
    margin-right: 18px;
    vertical-align: middle;
    position: relative;
    background-color: rgb(201, 200, 200);
}
.name_label {
    width: fit-content;
    margin-right: 0%;
}
.id_label {
    font-size: 1.3rem;
    font-weight: normal;
    margin-right: 0%;
    width: fit-content;
}
.field {
    width: 400px;
    height: 100px;
    margin-top: 30px;
}
.button {
    width: 90%;
    margin-bottom: 10px;
    margin-left: 20px;
}
.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 0px !important;
    margin-top: 5px;
}
.input_phone {
    height: 42px !important;
    line-height: 42px !important;
    font-size: 17px;
    width: 300px;
    margin-right: 5px;
}

.el-button--small {
    font-size: 18px;
}
.el-radio-group {
    height: 60px;
}
.el-radio--small.is-bordered {
    padding: 8px 15px 0 10px;
    border-radius: 3px;
    height: 44px;
    display: flex;
}
.el-radio--small.is-bordered .el-radio__label {
    font-size: 20px !important;
}
.el-radio__label {
    font-size: 20px;
}
.el-radio__input {
    align-items: center;
    justify-content: center;
}
el-card{
  color: beige;
}
label {
    display: block;
    margin: 0em 0em 0.2857em 0em;
    /* margin-top: 20px; */
    color: rgba(0, 0, 0, 0.8);
    font-size: 1.15em;
    font-weight: bold;
    text-transform: none;
}
span {
    display: block;
    margin: 0em 0em 0.2857em 0em;
    /* margin-top: 20px; */
    color: rgba(0, 0, 0, 0.8);
    font-size: 2em;
    /* font-weight: bold; */
    text-transform: none;
}

</style>